<template>
  <div id="groupon">
    <ul>
      <div class="gro-list" v-for="item in data">
        <li @click="routeToTrack((productName = item.title), 'prodetails', {id: item.id})">
          <div class="top">
            <img :src="item.img">
          </div>
          <div class="bottom">
            <div class="left">
              <p>{{item.title}}</p>
              <p class="price">
                <span>团购价:</span>
                <span>{{item.salePoints}}</span>
                <span class="line">
                  <span>原价:</span>
                  <span>{{item.originPoints}}</span>
                </span>
              </p>
            </div>
          </div>
        </li>
        <div class="right">
          <a class="toBuy" @click = "routeToUrl((productName = item.title), (url = item.o2o))">去购买</a>
        </div>
      </div>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'group',
    data () {
      return {
        data: {}
      }
    },
    created () {
      this.getProductInfoListApi()
    },
    methods: {
      routeToTrack (productName, name, params) {
        window.zhuge.track('Click', {
          '事件名称': '当月精选-分类-分类详情-商品点击-点击',
          '访问时间': new Date().toLocaleString(),
          'OpenID': this.getCookie('openid'),
          '商品名称': productName
        }, () => {
          this.routeto(name, params)
        })
      },
      routeToUrl (productName, url) {
        window.zhuge.track('Click', {
          '事件名称': '当月精选-分类-分类详情-商品点击-商品详情-O2O下单-点击',
          '访问时间': new Date().toLocaleString(),
          'OpenID': this.getCookie('openid'),
          '商品名称': productName
        }, () => {
          window.location.href = url
        })
      },
      getProductInfoListApi () {
        this.$axios.post(this.apidomain + '/api/productInfo/getProductInfoListApi/' + this.getCookie('appid'), {
          name: ''
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/groupon/groupon.less";
</style>
